<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo09-组件-监听子组件</title>
</head>
<script src="../libs/vue.js"></script>
<body> 
    <div id="app"> 
      <div :style="{fontSize : postFontSize + 'em'}">
        <h1>Global 定义了字体大小 postFontSize ：{{postFontSize}}</h1>
        <blog-post v-for="post in posts" :post="post" v-bind:key="post.id" 
        v-on:change-font-size = "rootChangeFontSize"
        ></blog-post>
    </div>
    </div>
</body>
<script>

Vue.config.productionTip = false;

Vue.component('blog-post',{
  props:['post'],
  template:`<div>
    <h3>Title: {{post.title}}</h3>
    <span>the sub title : {{post.subtitle}}</span>
    <!-- 父组件监听事件是要写在dom属性中，值为 kebab-case 命名方式，否则vue报警告 -->
    <button @click="fireEvent('change-font-size','+0.1' ,2)">增大字体</button>
    <button @click="fireEvent('change-font-size','-0.1' ,2 )">减小字体</button>
    <hr>
    </div>`,
    methods:{
      fireEvent:function(customEventName , evalue1 , evalue2 ){
        // console.log(this.$emit);
        /**
         * 通过这段代码，可看到 组件是Vue的一个"子类"
         * 
         * 其原理为：发布/订阅设计模式 。 而非js中的客制化事件技术。
         * 论设计模式的重要性。
         */ 
        var res = this == Vue;
        var self = this;
        console.log(`In component , result of this == Vue ? : ${ res }`);   // false
        console.log(`In component , result of this : ` , this );  // VueComponent
        console.log( this instanceof Vue ); // true 
        debugger;
        this.$emit(customEventName , evalue1 , evalue2);
      }
    }
});

var app = new Vue({
  el: '#app',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' ,subtitle:'哈1'},
      { id: 2, title: 'Blogging with Vue',subtitle:'哈2' },
      { id: 3, title: 'Why Vue is so fun' ,subtitle:'哈3'}
    ],
    postFontSize: 1
  },
  methods:{
    rootChangeFontSize:function(fireValue , secondValue){
      // console.log(arguments);

      var value = parseFloat(fireValue);
      this.postFontSize += value ;
    }
  }
});

</script>
</html>